import React, { PureComponent } from 'react';

// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts';
// 引入柱状图
import  'echarts/lib/chart/bar';
// 引入柱饼图
import  'echarts/lib/chart/pie';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legendScroll';

import { Card, Tabs, Collapse, Table, Icon } from 'antd';
import styles from './Data.less';
const TabPane = Tabs.TabPane;

export default class Bar extends PureComponent {
  componentDidMount() {
     /*  let data=this.props.yname;
      console.log(data); */
        // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
        // 绘制图表
    myChart.setOption({
          title: {
            text: '平台用户分布',
            subtext: '数据来自网络'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: ['总用户数', '未激活用户数']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
        },
        yAxis: {
            type: 'category',
            data: this.props.yname
           /*  data: ['基建部','业务拓展部','保卫部','物业管理部','离退休干部工作部','财务部','教育培训部','宣传策划部','读者活动部','少儿书刊部','理论研究部','辅导部','网络与数字资源部','特藏与地方文献部','信息咨询部','报刊部','图书借阅部','采编部','党委办公室','馆长办公室'] */
        },
        series: [
            {
                name: '总用户数',
                type: 'bar',
                /* data: [12, 16, 24, 35, 45, 56,45,65,76,80,90,100,110,200,300,403,520,300,700,550] */
                data:this.props.zuser
            },
            {
                name: '未激活用户数',
                type: 'bar',
                /* data: [16, 7, 8, 35, 45, 56,45,40,76,80,90,100,110,321,100,403,520,300,600,300] */
                data:this.props.cuser
            }
        ]
        });
    }
    

  render() {
    return (
      <div>
            {/* <p>{this.props.yname}</p> */}
            <div id="main" style={{ width:1000, height: 650 }}></div>
      </div>
    );
  }
}
